<template>
    <div class="cart">
        <h3 style="text-align:center">购物车</h3>
        
        <van-list
  v-model="loading"
  :finished="finished"
 
  @load="onLoad"
>
<div  v-for="item in list" :key="item.goods_id">
  <van-card
@click="handel(item)"

  num="2"
  price="2.00"
  desc="描述信息"
  thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
>
 <template #desc>
        <div class="desc">
          <div><span class="grade">{{item.goods_name}}</span></div>

        </div>
      </template>
      <!-- 价格 -->
        <template #price>
        <div class="price">{{item.goods_price}}</div>
      </template>
      <template #num>
      
          <van-stepper v-model="item.goods_count" @change="onStep" solt="num"/>
      </template>
       <template #thumb>
        <input type="checkbox" :value="item" v-model="monthy" @change="getSum">
        <div class="thumb">
          <img :src="item.goods_img" alt=""/>
        </div>
      </template>
      <input type="checkbox"  v-model="monthy" :value="item.id">
</van-card>
</div>
</van-list>


<van-submit-bar :price='sum' button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="isCheckAll"  @change="checkAll">全选</van-checkbox>
  <template #tip>
    您的订单为虚拟订单（支付后不发货）, 请勿支付大额款项！
  </template>
</van-submit-bar>
    </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue';
import { List , Card,SubmitBar,checkbox,Stepper} from 'vant';
import VueResource from 'vue-resource'

Vue.use(List);
Vue.use(Card);
Vue.use(VueResource);
Vue.use(SubmitBar);
Vue.use(checkbox);

Vue.use(Stepper);

export default {
    data() {
    return {
       isCheckAll:false,
      sum:0,
      list: [],
      loading: false,
      finished: false,
      monthy:[],
      value: 1
    };
  },
    methods:{
    
      onStep(){
      this.sum=(this.monthy.reduce((total,item)=>{
        return total+item.goods_count*item.goods_price
      },0)).toFixed(2)-0;
      this.sum*=100;
    },

        //价格计算
         getSum() {
                var sum = 0;
                for (let i in this.monthy) {
                    sum += (this.monthy[i].goods_price) * 100 * this.monthy[i].goods_count;                  
                }
                this.sum = sum;
            },          
        checkAll() {
                        // 清空数组(防止追加，二是反选)
                        this.monthy = [];
                        if (this.isCheckAll) {
                            // 全选
                            this.list.forEach((item) => {
                                this.monthy.push(item);
                            });
                        }
                        this.getSum();
                    },
        handel(){
            axios.get('/api')
      .then(function (res) {
        console.log(res)
      }) 
        },
        onLoad() {
            axios.get('/api').then((ret)=>{               
                    this.list=ret.data.cartInfo             
                this.loading = false;
                this.finished = true;
            } )
    },
    onSubmit(){
      var msg = "确定要支付吗？"
      if(confirm(msg) == true){
        // window.location.href="https://m.28sjw.com/alipay_wap/alipayapi.php";
        window.open('https://m.28sjw.com/alipay_wap/alipayapi.php');
      }else{
        return false;
      }
        
    },
    onClickEditAddress(){
        console.log(onClickEditAddress);
    }
      
       
    }
     
}
</script>

<style lang="scss" scoped>
.cart{
  .van-card__thumb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    input{
      margin-left: -10px;
    }
  }
}

</style>